<template>
  <div class="postlist">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card" style="margin-top:20px">
      <!-- 表格 -->
      <el-table
        :data="postList"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="600">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="180">
          <template slot-scope="scope">
            {{scope.row.type==1?'文章':'视频'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="user.nickname"
          label="作者">
        </el-table-column>
        <el-table-column
          label="操作"
          width="250">
          <template slot-scope="scope">
            <!-- scope就是当前的数据行对象，包含当前行数据，索引。。。 scope.row就是当前的行数据，以后进行数据操作时，
            主要时对这个值进行处理 -->
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" icon="el-icon-edit"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="分享" placement="top">
              <el-button type="primary" icon="el-icon-share"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="primary" icon="el-icon-delete"></el-button>
            </el-tooltip>
            
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"   
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[2,4,6,8]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top:20px">
    </el-pagination>
    </el-card>
    
  </div>
</template>

<script>
import {getPostList} from '@/apis/post.js'
export default {
  data () {
    return {
      postList:[],
      total:0,      //查询到的数据的总数
      pageIndex:1,  //当前页码
      pageSize:2    //每页显示的数量
    }
  },
  methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        // val:就是当前用户所需要展示的数量
        // 重置pageSize
        this.pageSize = val
        // 让axios根据重置后的pageSize发请求获取数据
        this.init()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageIndex = val
        this.init()
      },
      async init(){
        let res = await getPostList({pageIndex:this.pageIndex,pageSize:this.pageSize})
        console.log(res);
        this.postList = res.data.data
        this.total = res.data.total
      }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less" scoped>

</style>